<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        body, button, input, legend {
            margin: 0;
            padding: 0;
            font: 16px "微软雅黑";
        }

        .m-form {
            margin: 150px auto;
            width: 325px;
            border: 1px solid #ddd;
        }

        .m-form legend {
            width: 100%;
            line-height: 30px;
            text-indent: 1em;
            color: #fff;
            background-color: #2d2d2d;
        }

        .m-form fieldset {
            border: none;
            padding: 20px;
        }

        .m-form div {
            margin: 20px;
        }

        .m-form button {
            width: 100%;
            height: 30px;
            color: #fff;
            border: 1px solid #ddd;
            cursor: pointer;
            background-color: #2d7dca;
        }

        .m-form .msg {
            margin: 5px;
            text-align: center;
            display: none;
        }

        /*.m-form .tip{padding-left:6em;font-size:12px;color:#C0C0C0;}*/

        .m-form .j-err {
            display: block;
            color: #FF0000;
        }

        .m-form .j-suc {
            display: block;
            color: #158226;
        }

        .m-form .u-txt {
            width: 160px;
            padding: 3px;
            border: 1px solid #aaa;
        }

        .m-form .j-error {
            border-color: #f00;
            background-color: #FFE7E7;
        }

        .m-form .j-disabled {
            cursor: default;
            background-color: #ddd;
        }
    </style>
</head>
<body>
<form class="m-form" name="loginForm" autocomplete="off">
    <legend>账号密码登录</legend>
    <fieldset>
        <p class="msg" id="message"></p>
        <div>
            <label for="name">用户名：</label>
            <input id="name" name="name" type="text" class="u-txt" minlength="1"
                   required><br/>
            <!--            <span class="tip">请输入正确的用户名</span>-->
        </div>
        <div>
            <label for="password">密　码：</label>
            <input id="password" name="password" type="password" class="u-txt"><br/>
            <!--            <span class="tip">密码至少需要6位</span>-->
        </div>
        <div>
            <button name="loginBtn">登　录</button>
        </div>
    </fieldset>
</form>
<script>
    (function () {
        let form = document.forms.loginForm,
            nmsg = document.getElementById('message'),
            divs = document.querySelectorAll('div'),
            nameInp = document.querySelector('#name'),
            pwdInp = document.querySelector('#password');

        console.log(divs)

        function md5(msg) {
            return msg;
        }

        function showMessage(clazz, msg) {
            if (!clazz) {
                // nmsg.innerHTML = '';
                nmsg.classList.remove('j-suc');
                nmsg.classList.remove('j-err');
            } else {
                nmsg.innerHTML = msg;
                nmsg.classList.add(clazz);
            }
        }

        function disableSubmit(disabled) {
            form.loginBtn.disabled = !!disabled;
            let method = !disabled ? 'remove' : 'add';
            form.loginBtn.classList[method]('j-disabled');
        }

        function invalidInput(node, msg) {
            showMessage('j-err', msg);
            node.classList.add('j-error');
            node.focus();
        }

        function clearInvalid(node) {
            showMessage();
            node.classList.remove('j-error');
        }

        form.name.addEventListener(
            'invalid', function (event) {
                event.preventDefault();
                let input = form.name;
                invalidInput(input, '账号不能为空');
            }
        );

        form.addEventListener(
            'input', function (event) {
                // 还原错误状态
                clearInvalid(event.target);
                // 还原登录按钮状态
                disableSubmit(false);
            }
        );

        form.addEventListener(
            'submit', function (e) {
                // 密码验证
                let input = form.password,
                    pswd = input.value,
                    emsg = '';
                if (pswd.length < 6) {
                    emsg = '密码长度最少6位';
                }
                if (!!emsg) {
                    e.preventDefault();
                    invalidInput(input, emsg);
                    return;
                }
                input.value = md5(pswd);
                // 禁用提交按钮
                disableSubmit(true);


                //阻止表单的默认提交行为
                e.preventDefault();

                //拿到填写的用户名和密码
                let name = nameInp.value,
                    pwd = pwdInp.value;

                //发送ajax请求
                let xhr = new XMLHttpRequest();
                xhr.open('POST', 'http://admin-api.macrozheng.com/admin/login', true);

                xhr.onload = function () {
                    //因为后端返回的是json格式数据
                    let res = JSON.parse(xhr.responseText);

                    // 还原登录按钮状态
                    disableSubmit(false);
                    // 识别登录结果
                    if (res.code === 200) {
                        divs.forEach(function (item) {
                            item.remove()
                        });
                        showMessage('j-suc', '登录成功！');
                        // form.reset();
                    } else {
                        showMessage('j-err', '账号密码错误！');
                    }
                }

                //注意：POST请求携带参数需要提前说明
                xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

                //因为POST请求携带参数是在请求体内的
                let sendData = {username: name, password: pwd};  //登录账号为admin，密码：macro123
                //将用户输入值序列化成字符串
                xhr.send(JSON.stringify(sendData));
            }
        );

        // //给form标签绑定一个表单提交事件
        // form.onsubmit = function (e) {
        //     //阻止表单的默认提交行为
        //     e.preventDefault();
        //
        //     //拿到填写的用户名和密码
        //     let name = nameInp.value,
        //         pwd = pwdInp.value;
        //
        //     //发送ajax请求
        //     let xhr = new XMLHttpRequest();
        //     xhr.open('POST', 'http://admin-api.macrozheng.com/admin/login', true);
        //
        //     xhr.onload = function () {
        //         //因为后端返回的是json格式数据
        //         let res = JSON.parse(xhr.responseText);
        //
        //         // 还原登录按钮状态
        //         disableSubmit(false);
        //         // 识别登录结果
        //         if (res.code === 200) {
        //             showMessage('j-suc', '登录成功！');
        //             form.reset();
        //         } else {
        //             showMessage('j-err', '账号密码错误！');
        //             form.reset();
        //         }
        //     }
        //
        //     //注意：POST请求携带参数需要提前说明
        //     xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        //
        //     //因为POST请求携带参数是在请求体内的
        //     let sendData = {username: name, password: pwd};  //登录账号为admin，密码：macro123
        //     //将用户输入值序列化成字符串
        //     xhr.send(JSON.stringify(sendData));
        // };

    })();
</script>
</body>
</html>